import Raphael from 'raphael';
import data from './testData';
const width = 1500, height = 600;
const w = 100, h = 50, padding = 5;
const id = "paperDiv";
let indexTotal = 4;
let paper = Raphael(id, width, height);

function makeMap(node, count, fater) {
  count = count || 1;
  for (let i = 0; i < node.length; i++) {
    node[i].index = count;
    node[i].leng = node.length;
    node[i].fater = fater || null;
    // indexTotal = count;
    drawEl(node[i], i, node.length)
    if (node[i].children && node[i].children.length > 0) {
      makeMap(node[i].children, count + 1, node[i]);
    }
  }
}
makeMap(data);

window.f=function(n,N){
   return n*(600/(N-1))
}


function drawEl(node, i, length) {
  console.log(node.label,i,length);
  let a = paper.rect();
  let b = paper.text();
  let lineL,lineR,lineT,lineB;
  const attrs_after = node.fater && node.fater.rect.getBBox();
  let _x = 20;
  let _y;
  if(node.index === 1){
    _y = height / length / 2 - h / 2;
  }else if(i === 0){
    _y = 0;
  }
  else if(i === length - 1){
    _y = height - h - padding
  }
  else{
    _y = i * ((i*(height/(length-1))) / (length-1)) - h/2
  }
  // if(node.index != 1)
  // console.log( attrs_after.x2 + w*2,"-----------------");
  // 方框
  a.attr({
    // x: node.index === 1 ? _x : _x + w * node.index * 2 - w * 2,
    x: node.index === 1 ? _x : attrs_after.x2 + w*2,
    y:  _y,
    // y: node.index === 1 ? height / length / 2 - h / 2 :i * (height/node.fater.leng / (length - 1)),
    width: w,
    height: h,
    "fill": "#17a9c6",
    "stroke": "#2a6570",
  });
  const attrs = a.getBBox();
  if(node.label == "二级 1-1"){
  }
  // console.log(attrs);
  // 文字
  b.attr({
    x: attrs.x + attrs.width / 2,
    y: attrs.y + attrs.height / 2,
    text: node.label
  });
  // 原定格子宽度： w = 100, h = 50;
  // 参数：元素本身，下标，同层级格数
  // x: _x + w * node.index * 2 - w * 2  默认边距 + 父元素x坐标 + 父元素宽度
  // y: i * (height / (length -1))
  // w: text.width + padding
  // h: text.fontSize + padding
  // line-l: node.x, node.y + node.height/2                            ----->  index != 1  不为第一维数组
  // line-r: node.x + node.width, node.y + node.height/2               ----->  index != indexTotal 不为最后一维数组
  // line-t: node.x + node.width/2, node.y   ----->  i != 0  不为数组第一个
  // line-b: node.x + node.width/2, node.y + node.height/2    ----->  i != length-1  不为数组最后一个
  
  // linL
  if(node.index !== 1){
    lineL = paper.path(`M${attrs.x},${attrs.y+attrs.height/2}L${attrs_after.x2+attrs.width},${attrs.y+attrs.height/2}`);
  }
  // linR
  if(node.index != indexTotal){
    lineR = paper.path(`M${attrs.x2},${attrs.y+attrs.height/2}L${attrs.x2+attrs.width},${attrs.y+attrs.height/2}`);
  }
  // linT
  if(i !== 0){
    lineT = paper.path(`M${attrs.x-attrs.width},${attrs.y+attrs.height/2}L${attrs.x-attrs.width},${attrs_after.y+attrs_after.height/2}`)
  }
  // linB
  if(i !== length - 1){}
  node.rect = a;
}